<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
            <label> 标签为 input 元素定义标注（标记）。
             for 属性应当与相关元素的 id 属性相同
        -->
    <label for="province">省：</label>
    <select id="province"></select>

    <label for="city">市：</label>
    <select id="city"></select>

    <label for="area">区：</label>
    <select id="area"></select>
    <!-- js文件里是城市信息 -->
    <script src="./city_code.js"></script>
    <script>
        var province = document.querySelector('#province'); //省
        var cityNode = document.querySelector('#city'); //市
        var areaNode = document.querySelector('#area'); //区

        // bind 绑定  Province 省份
        function bindProvince() {
            // option  选项  定义下拉(select)列表中的一个选项（一个条目）
            var options = '<option value="-1">请选择...</option>';
            // forEach() 遍历
            city_code.forEach(function(c) {
                options += `<option value="${c.code}">${c.name}</option>`;
            })
            province.innerHTML = options
        }

        bindProvince();


        // bind 绑定  City  市
        // code 编码
        function bindCity(provinceCode) {
            var qq = function(v) {
                    return v.code === provinceCode;
                }
                // filter() 过滤
            var provinceArr = city_code.filter(qq);
            var city = [];
            if (provinceArr.length > 0) {
                var province = provinceArr[0]
                city = province.city;
            }

            var options = '<option value="-1">请选择...</option>';
            var ww = function(c) {
                options += `<option value="${c.code}">${c.name}</option>`;
            }
            city.forEach(ww);

            cityNode.innerHTML = options;
        }

        bindCity("-1");

        //绑定 区
        function bindArea(provinceCode, cityCode) {
            var provinceArr = city_code.filter(function(v) {
                return v.code === provinceCode;
            });
            var area = [];
            if (provinceArr.length > 0) {
                var province = provinceArr[0]
                var cityArr = province.city;
                var oneCityArr = cityArr.filter(function(c) {
                    return c.code === cityCode;
                });
                if (oneCityArr.length > 0) {
                    var city = oneCityArr[0];
                    area = city.area;
                }
            }

            var options = '<option value="-1">请选择...</option>';
            area.forEach(function(c) {
                options += `<option value="${c.code}">${c.name}</option>`;
            })

            areaNode.innerHTML = options;
        }

        bindArea("-1", "-1")

        province.addEventListener('change', function(e) {
            bindCity(e.target.value);
            bindArea(e.target.value, "-1")
        })

        cityNode.addEventListener('change', function(e) {
            var provinceCode = province.value;
            var cityCode = e.target.value;
            bindArea(provinceCode, cityCode)
        })
    </script>
</body>

</htm